<?php
echo $this->Html->css('AjaxTest.base');
echo $this->Html->script(['AjaxTest.vue', 'AjaxTest.axios.min', 'AjaxTest.md5.min']);
?>
<div class="container-fluid" id="app">
    <div class="container-form">
        <h3>Form.</h3>
        <div>
            <select v-model="methodType">
                <option value="post" >POST</option>
                <option value="get" >GET</option>
                <option value="delete" >DELETE</option>
                <option value="put" >PUT</option>
                <option value="patch" >PATCH</option>
            </select>
        </div>
        <div class="form-group">

            <button class="form-control" @click="loginAdd">Login Form Add</button>
            <button class="form-control" @click="loginIn">Login In</button>
            <div class="form-uri">
                <input type="text" placeholder="Login.URI" v-model="loginURI">
            </div>
            <div class="form-area">
                <ul>
                    <li v-for="(item, index) in loginList">
                        <div class="form-input-key">
                            <input type="text" placeholder="key" v-model="item.key">
                        </div>
                        <div class="form-input-val">
                            <input type="text" placeholder="val" v-model="item.val">
                        </div>
                        <div class="form-input-delete form-pointer" @click="loginMove(index)">X</div>
                        <div class="clearfix"></div>
                    </li>
                </ul>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="form-group">
            <button class="form-control" @click="formAdd">Data Form Add</button>
            <button class="form-control" @click="formSubmit">Submit Data</button>
            <div class="form-uri">
                <input type="text" placeholder="Form.URI" v-model="formURI">
            </div>
            <div class="form-area">
                <ul>
                    <li v-for="(item, index) in formList">
                        <div class="form-input-key">
                            <input type="text" placeholder="key" v-model="item.key">
                        </div>
                        <div class="form-input-val">
                            <input type="text" placeholder="val" v-model="item.val">
                        </div>
                        <div class="form-input-delete form-pointer" @click="formMove(index)">X</div>
                        <div class="clearfix"></div>
                    </li>
                </ul>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
    <div class="container-result">
        <h3>Result.</h3>
        <div :class="[item.status == 200 ? 'result-success' : 'result-error']"  v-for="(item, index) in msgList">
            <div class="form-pointer" @click="msgMove(index)">X</div>
            <span>MSG: {{ item.msg }}</span><br>
            <span>MEMO: {{item.memo}}</span>
            <div v-if="item.error" v-html="item.error"></div>
        </div>
    </div>
</div>
<script>
    axios.defaults.baseURL = '<?php echo preg_replace('#ajax-test/mains.*#','', $this->Url->build(null,'fullBase')); ?>';
    axios.defaults.headers.common['Authorization'] = '';
    var app = new Vue({
        el: '#app',
        data: {
            loginURI: '',
            formURI: '',
            loginList: [],
            formList: [],
            message: 'Hello Vue!',
            methodType: 'post',
            msgList: []
        },
        methods: {
            loginAdd: function() {
                 this.loginList.push({key:'', val:''});
            },
            loginMove: function(index) {
                this.loginList.splice(index, 1);
            },
            formAdd: function() {
                this.formList.push({key:'', val:''});
            },
            formMove: function(index) {
                this.formList.splice(index, 1);
            },
            msgMove: function(index) {
                this.msgList.splice(index, 1);
            },
            loginIn: function() {
                let data = {};
                let p = /md5\(.*\)/i;

                for(let v of this.loginList) {
                    if(p.test(v.val)){
                        v.val = eval(v.val);
                    }
                    data[v.key] = v.val;
                }

                var vm = this;
                axios({
                    method: this.methodType,
                    url: this.loginURI,
                    data: data
                })
                .then(function (response) {
                    let data = response.data;
                    if(data.status == 200 || data.status == 400) {
                        vm.msgList.unshift(response.data);
                        if(data.status == 200){
                            axios.defaults.headers.common['Authorization'] = 'Bearer ' + data.memo['jwt'];
                        }
                    } else {
                        vm.msgList.unshift({
                            status : 400,
                            msg : 'error',
                            error: response.data
                        });
                    }
                    console.log(response);
                })
                .catch(function (error) {
                    let data = {
                        status: 400,
                        msg: 'Error',
                        error: error
                    };
                    vm.msgList.unshift(data);
                    console.log(data);
                });
            },
            formSubmit: function () {
                let data = {};

                for(let v of this.formList) {
                    data[v.key] = v.val;
                }

                var vm = this;
                axios({
                    method: this.methodType,
                    url: this.formURI,
                    data: data
                })
                    .then(function (response) {
                        let data = response.data;
                        if(data.status == 200 || data.status == 400) {
                            vm.msgList.unshift(response.data);
                        } else {
                            vm.msgList.unshift({
                                status : 400,
                                msg : 'error',
                                error: response.data
                            });
                        }
                        console.log(response);
                    })
                    .catch(function (error) {
                        let data = {
                            status: 400,
                            msg: 'Error',
                            error: error
                        };
                        vm.msgList.unshift(data);
                        console.log(data);
                    });
            }
        }
    })
</script>